<div>
    <form class="layui-form" action="" lay-filter="testform">
        <div class="layui-form-item">
            <input type="hidden" name="title" id="custom" value="" placeholder="请选择数据" autocomplete="off"
                class="layui-input">
             <input type="text" name="title2" id="custom2" value="" placeholder="请选择数据" autocomplete="off"
                class="layui-input">
        </div>

        <!-- 选项卡 -->

        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">时段差值数据</li>
                <li>历史仪表数据</li>
                <li>公式库</li>
                <input type="checkbox" name="" title="乘倍率数据" lay-skin="primary" id="beilv" lay-filter='Lay-check'>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show" style="height: 360px;">
                    <div style="height: 380px; display: flex;align-items: center;">
                        <!-- 树形 -->
                        <div id="test2" class="demo-tree"
                            style="width: 25%; height: 95%;overflow: auto;border: 1px solid #ccc;"></div>
                        <!--  -->
                        <div id="test3" class="demo-tree"
                            style="width: 25%; height: 95%;overflow: auto;border: 1px solid #ccc;margin-left: 30px;">
                        </div>

                        <div style="margin-left:30px;width: 50%;display: flex;justify-content: center;">
                            <button type="button" class="layui-btn-lg layui-btn" onclick=clearAll()>清空</button>
                            <button type="button" class="layui-btn-lg layui-btn" onclick=calc(1)>+</button>
                            <button type="button" class="layui-btn-lg layui-btn" onclick=calc(2)>-</button>
                            <button type="button" class="layui-btn-lg layui-btn" onclick=calc(3)>x</button>
                            <button type="button" class="layui-btn-lg layui-btn" onclick=calc(4)>÷</button>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item" style="height: 360px;">
                    <div style="height: 380px; display: flex;align-items: center;">
                        <!-- 树形 -->
                        <div id="test4" class="demo-tree"
                            style="width: 25%; height: 95%;overflow: auto;border: 1px solid #ccc;"></div>
                        <!--  -->
                        <div id="test5" class="demo-tree"
                            style="width: 25%; height: 95%;overflow: auto;border: 1px solid #ccc;margin-left: 30px;">
                        </div>

                        <div style="margin-left:30px;width: 50%;display: flex;justify-content: center;">
                            <button type="button" class="layui-btn-lg layui-btn" onclick=clearAll()>清空</button>
                            <button type="button" class="layui-btn-lg layui-btn" onclick=calc(1)>+</button>
                            <button type="button" class="layui-btn-lg layui-btn" onclick=calc(2)>-</button>
                            <button type="button" class="layui-btn-lg layui-btn" onclick=calc(3)>x</button>
                            <button type="button" class="layui-btn-lg layui-btn" onclick=calc(4)>÷</button>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item" style="height: 360px;">
                    <div style="height: 380px; display: flex;align-items: center;">
                        <!-- 树形 -->
                        <div id="formula-computer" class="demo-tree"
                            style="width: 25%; height: 95%;overflow: auto;border: 1px solid #ccc;"></div>
                        <!--  -->
                        <div id="formula-user" class="demo-tree"
                            style="width: 25%; height: 95%;overflow: auto;border: 1px solid #ccc;margin-left: 30px;">
                        </div>

                        <div style="margin-left:30px;width: 50%;display: flex;justify-content: center;">
                            <button type="button" class="layui-btn-lg layui-btn" onclick=clearAll()>清空</button>
                            <button type="button" class="layui-btn-lg layui-btn" onclick=calc(1)>+</button>
                            <button type="button" class="layui-btn-lg layui-btn" onclick=calc(2)>-</button>
                            <button type="button" class="layui-btn-lg layui-btn" onclick=calc(3)>x</button>
                            <button type="button" class="layui-btn-lg layui-btn" onclick=calc(4)>÷</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style=" margin-top:1px;">
        </fieldset>
        <span class="layui-btn" lay-submit lay-filter="formDemo"
            style="position: relative;left: 1100px;bottom: 0px;">确定</span>

    </form>





    <script type="text/html" template lay-done="layui.data.getData(d.params)">
    </script>
</div>

<style>
    .layui-icon-file:before {
        content: "\e68e";
    }

    .layui-tree-main {
        width: 100%;
    }

    .layui-tree-txt {
        width: 100%;
    }

    .layui-tree-entry {
        height: 28px;
    }
</style>

<script>
    layui.use(['admin', 'laytpl', 'form', 'laypage', 'layer', 'view', 'tree', 'util',
            'setter', 'upload','form','element'
        ], function () {
            var $ = layui.$,
                admin = layui.admin,
                table = layui.table,
                laytpl = layui.laytpl,
                laypage = layui.laypage,
                layer = layui.layer,
                view = layui.view,
                setter = layui.setter,
                tree = layui.tree,
                util = layui.util
                form = layui.form
                element = layui.element
            tipsIndex = null;
            form.render()

            window.clearAll = function () {
                document.getElementById('custom').value = ''
                document.getElementById('custom2').value = ''
            }
            window.calc = function (params) {
                let value = document.getElementById('custom').value;
                let value2 = document.getElementById('custom2').value;
                let flag = value.charAt(value.length - 1);
                if (flag === '+' || flag === '-' || flag === '×' || flag === '÷') {
                    document.getElementById('custom').value = value.slice(0, value.length - 1);
                    document.getElementById('custom2').value = value2.slice(0, value2.length - 1);
                }
                if (value === '') {
                    layer.msg('请先选择数据!')
                    return
                }
                if (params === 1) {
                    document.getElementById('custom').value = document.getElementById('custom').value + '+'
                    document.getElementById('custom2').value = document.getElementById('custom2').value + '+'
                } else if (params === 2) {
                    document.getElementById('custom').value = document.getElementById('custom').value + '-'
                    document.getElementById('custom2').value = document.getElementById('custom2').value + '-'
                } else if (params === 3) {
                    document.getElementById('custom').value = document.getElementById('custom').value + '×'
                    document.getElementById('custom2').value = document.getElementById('custom2').value + '×'
                } else if (params === 4) {
                    document.getElementById('custom').value = document.getElementById('custom').value + '÷'
                    document.getElementById('custom2').value = document.getElementById('custom2').value + '÷'
                }

            }

            element.on('tab(docDemoTabBrief)', function(data){
                if(data.index == 2){
                    $('.layui-form-checkbox').attr("style","display:none;"); 
                }else{
                    $('.layui-form-checkbox').attr("style","display:inline-block;"); 
                }
            });







            layui.data.getData = function (data) {
                document.getElementById('custom').value = data.formula
                document.getElementById('custom2').value = data.formulaview


                // 一系列的数据格式转换
                data.treeData = eval('(' + data.treeData + ')')


                var newTreeData = {
                    title: data.treeData.text,
                    fullname: data.treeData.fullname,
                    id: data.treeData.id,
                    children: data.treeData.nodes,
                    spread: true
                }
                var keyMap = {
                    "nodes": "children",
                    "text": "title"
                }

                newTreeData.children.forEach(item => {
                    // console.log(item);
                    let obj = item;
                    for (let key in obj) {
                        let newKey = keyMap[key];
                        if (newKey) {
                            obj[newKey] = obj[key]
                            delete obj[key]
                            if (newKey === 'children') {
                                obj.children.forEach(item => {
                                    let obj2 = item;
                                    for (let key2 in obj2) {
                                        let newKey2 = keyMap[key2];
                                        if (newKey2) {
                                            obj2[newKey2] = obj2[key2]
                                            delete obj2[key2]
                                        }
                                    }
                                })
                            }
                        }
                    }
                })

                var newTreeDataArr = [newTreeData]
                // console.log(newTreeDataArr);

                // -------------------------------

                 // 查看是否选中倍率
                 var checked = false;
                form.on('checkbox(Lay-check)', function(obj){
                    checked = !checked;
                });


                //基本演示
                tree.render({
                    elem: '#test2',
                    data: newTreeDataArr,
                    accordion: false,
                    // showLine: false,
                    id: 'demoId1',
                    click: function (obj) {
                        var data = obj.data; //获取当前点击的节点数据
                        console.log(data);
                        $.ajax({
                            method: 'post',
                            url: 'http://www.iotddc.com/IOTDDC/meterroperty/getAllRopertyTree',
                            dataType: 'text',
                            data:{
                                token:'EEAADD2299AAEE226677331177885599'
                            },
                            success: function (res) {
                                var inputDom = document.getElementById('custom')
                                var inputDom2 = document.getElementById('custom2')
                                var value = eval('[' + res + ']')
                                value.forEach(item => {
                                    let obj = item;
                                    var keyMap = {
                                        "text": "title"
                                    }
                                    for (let key in obj) {
                                        let newKey = keyMap[key];
                                        if (newKey) {
                                            obj[newKey] = obj[key]
                                            delete obj[key]
                                        }
                                    }
                                })
                                tree.render({
                                    elem: '#test3',
                                    data: value,
                                    id: 'demoId2',
                                    showLine: false,
                                    click: function (obj) {
                                        var flag = inputDom.value.charAt(inputDom.value.length - 1);
                                        flag = flag === '' ? '+' : flag
                                        if(checked == true){
                                            var dataName = 'FCB' + data.id +'_' +data.fullname + '_' + obj.data.fullname;
                                        }else{
                                            var dataName = 'FCN' + data.id +'_' +data.fullname + '_' + obj.data.fullname;
                                        }
                                        var dataName2 = data.fullname + '_' + obj.data.fullname;
                                        if (flag === '+' || flag === '-' || flag === '×' || flag === '÷') {
                                            inputDom.value = inputDom.value + dataName
                                            inputDom2.value = inputDom2.value + dataName2
                                        }else{
                                            layer.msg('请先选择运算符')
                                        }
                                        

                                    }



                                })

                            }
                        })
                    }
                });



                tree.render({
                elem: '#test4',
                data: newTreeDataArr,
                accordion: false,
                // showLine: false,
                id: 'demoId3',
                click: function (obj) {
                    var data = obj.data; //获取当前点击的节点数据
                    console.log(data);
                    $.ajax({
                        method: 'post',
                        url: 'http://www.iotddc.com/IOTDDC/meterroperty/getAllRopertyTree',
                        dataType: 'text',
                        data:{
                            token:'EEAADD2299AAEE226677331177885599'
                        },
                        success: function (res) {
                            var inputDom = document.getElementById('custom')
                            var inputDom2 = document.getElementById('custom2')
                            var value = eval('[' + res + ']')
                            value.forEach(item => {
                                let obj = item;
                                var keyMap = {
                                    "text": "title"
                                }
                                for (let key in obj) {
                                    let newKey = keyMap[key];
                                    if (newKey) {
                                        obj[newKey] = obj[key]
                                        delete obj[key]
                                    }
                                }
                            })
                            // console.log(value);
                            tree.render({
                                elem: '#test5',
                                data: value,
                                id: 'demoId4',
                                showLine: false,
                                click: function (obj) {
                                    var flag = inputDom.value.charAt(inputDom.value.length - 1);
                                    flag = flag === '' ? '+' : flag
                                    if(checked == true){
                                        var dataName = 'FLB' + data.id +'_' +data.fullname + '_' + obj.data.fullname;
                                    }else{
                                        var dataName = 'FLN' + data.id +'_' +data.fullname + '_' + obj.data.fullname;
                                    }
                                    var dataName2 = data.fullname + '_' + obj.data.fullname;
                                    if (flag === '+' || flag === '-' || flag === '×' || flag === '÷') {
                                        inputDom.value = inputDom.value + dataName
                                        inputDom2.value = inputDom2.value + dataName2
                                    }else{
                                        layer.msg('请先选择运算符')
                                    }
                                    

                                }



                            })

                        }
                    })
                }
                });


                    // 公式库
                    $.ajax({
                    method:'post',
                    url:'http://www.iotddc.com/IOTDDC/formula/getFormulaTree',
                    dataType:'text',
                    data:{
                        token:'EEAADD2299AAEE226677331177885599',
                        ftype:'1'
                    },
                    success:function(res){
                        var inputDom = document.getElementById('custom')
                        var inputDom2 = document.getElementById('custom2')
                        var data = eval('[' + res + ']')
                        data.forEach(item => {
                            let obj = item;
                            var keyMap = {
                                "text": "title"
                            }
                            for (let key in obj) {
                                let newKey = keyMap[key];
                                if (newKey) {
                                    obj[newKey] = obj[key]
                                    delete obj[key]
                                }
                            }
                        })
                        tree.render({
                            elem:'#formula-computer',
                            data:data,
                            id: 'formula',
                            showLine: false,
                            text: {
                                defaultNodeName: data[0].text
                            },
                            click: function (obj) {
                                    var flag = inputDom.value.charAt(inputDom.value.length - 1);
                                    flag = flag === '' ? '+' : flag
                                    var dataName =  obj.data.fullname
                                    var dataName2 =  obj.data.fullname
                                    dataName = dataName.substr(0,dataName.indexOf('_'))
                                    if (flag === '+' || flag === '-' || flag === '×' || flag === '÷') {
                                        inputDom.value = inputDom.value + dataName
                                        inputDom2.value = inputDom2.value + dataName
                                    }else{
                                        layer.msg('请先选择运算符')
                                    }
                                }             
   
                        })
                    }
                })

                $.ajax({
                    method:'post',
                    url:'http://www.iotddc.com/IOTDDC/formula/getFormulaTree',
                    dataType:'text',
                    data:{
                        token:'EEAADD2299AAEE226677331177885599',
                        ftype:'2'
                    },
                    success:function(res){
                        var inputDom = document.getElementById('custom')
                        var inputDom2 = document.getElementById('custom2')
                        var data = eval('[' + res + ']')
                        data.forEach(item => {
                            let obj = item;
                            var keyMap = {
                                "text": "title"
                            }
                            for (let key in obj) {
                                let newKey = keyMap[key];
                                if (newKey) {
                                    obj[newKey] = obj[key]
                                    delete obj[key]
                                }
                            }
                        })
                        tree.render({
                            elem:'#formula-user',
                            data:data,
                            id: 'formula2',
                            showLine: false,
                            text: {
                                defaultNodeName: data[0].text
                            },
                            click: function (obj) {
                                    var flag = inputDom.value.charAt(inputDom.value.length - 1);
                                    flag = flag === '' ? '+' : flag
                                    var dataName =  obj.data.fullname
                                    var dataName2 =  obj.data.fullname
                                    dataName = dataName.substr(0,dataName.indexOf('_'))
                                    if (flag === '+' || flag === '-' || flag === '×' || flag === '÷') {
                                        inputDom.value = inputDom.value + dataName
                                        inputDom2.value = inputDom2.value + dataName
                                    }else{
                                        layer.msg('请先选择运算符')
                                    }
                                }               
   
                        })
                    }
                })
                

                function is_leagl_brackets(string) {
                var array = [];
                for (var i = 0; i < string.length; i++) {
                    var item = string[i];
                    if (item === "(") {
                    array.push("(");
                    } else if (item === ")") {
                    if (array.length === 0) {
                        return false;
                    } else {
                        array.pop();
                    }
                    } else {
                    continue;
                    }
                };
                return array.length === 0;
                };





            }



        }

    );
</script>